<template>
  <page-wrap
    :show-top="showTop"
    :dark="showTop"
    darkTxtColor="#222"
    back
    bg-color="#FFF"
    hideTab
    :title="showTop ? personInfo.person_iname || '职业顾问' : ''"
  >
    <!--  职业顾问管理页面      -->
    <view class="consultant">
      <view class="consultant-top" :style="'height:' + bgHeight + 'px;'">
        <u-image
          :showLoading="true"
          :src="personInfo.background_pic || defaultBg"
          width="100%"
          height="100%"
          @click="previewImg(personInfo.background_pic)"
        ></u-image>
      </view>
      <view class="base-info">
        <view class="base-info-top">
          <view class="avatar-wrap">
            <Avatar
              :src="personInfo.person_pic"
              :sex-icon="personInfo.person_sex == '女' ? womanImg : manImg"
              img-mode="aspectFill"
              width="160"
              height="160"
              sexIconWidth="40"
            />
            <!-- <image class="avatar" mode="aspectFill" :src="personInfo.person_pic"></image> -->
          </view>
          <view class="right-data">
            <view class="num-item">
              <text class="num-value">{{ personInfo.praise_count }}</text>
              <text class="num-label">获赞</text>
            </view>
            <view class="num-item">
              <text class="num-value">{{ personInfo.fans_count }}</text>
              <text class="num-label">粉丝</text>
            </view>
            <view class="num-item">
              <text class="num-value">{{ personInfo.follow_count }}</text>
              <text class="num-label">关注</text>
            </view>
          </view>
        </view>
        <view class="author">
          <view class="author-name"
            >{{ personInfo.person_iname || "" }}
            <text
              v-if="personInfo.is_adviser == 1"
              class="icon icon-consultant"
            ></text>
          </view>
          <view v-if="personInfo.rel != 5" @click="handleFollow">
            <view v-if="personInfo.rel == 0" class="follow">+ 关注</view>
            <view v-else-if="personInfo.rel == 1" class="follow followed"
              >已关注</view
            >
          </view>
        </view>
        <view class="good-at">
          <text v-if="personInfo.good_at" class="icon icon-auth"></text>
          {{ personInfo.good_at || "" }}
        </view>
        <view class="topic">
          <view
            v-for="(topic, index) of personInfo.person_topic_arr"
            :key="index"
            class="topic-item"
          >
            <text class="icon icon-tag"></text>
            {{ topic.topic }}
          </view>
        </view>
        <view class="person-des">
          <view class="des-title"> 个人简介 </view>
          <view class="des-text">
            {{ desContent || "" }}
            <view
              v-if="isShowReadMore"
              class="unfold"
              @click="showAllDes = !showAllDes"
              >{{ showAllDes ? "收起" : "全文" }}
            </view>
          </view>
        </view>
      </view>
      <view class="content">
        <u-sticky :offset-top="navHeight * 2">
          <view class="tabs-wrap">
            <u-tabs-swiper
              ref="tabs"
              class="tabs"
              :is-scroll="false"
              :list="tabList"
              :current="current"
              :active-color="activeColor"
              inactive-color="#555555"
              :height="90"
              :font-size="32"
              bar-width="56"
              bar-height="14"
              :bar-style="barStyleObj"
              :gutter="40"
              :duration="0.2"
              :active-item-style="activeStyle"
              @change="tabsChange"
            ></u-tabs-swiper>
          </view>
        </u-sticky>

        <swiper
          class="swiper-box"
          :duration="200"
          :current="swiperCurrent"
          @transition="handleTransition"
          @animationfinish="handleAnimation"
        >
          <swiper-item class="swiper-item">
            <ArticleList
              :consultantId="consultantId"
              :personId="personId"
            ></ArticleList>
          </swiper-item>
          
          <swiper-item class="swiper-item">
            <PublicationList
              id="publicationList"
              :consultantId="consultantId"
              :personId="personId"
            ></PublicationList>
          </swiper-item>
          <swiper-item class="swiper-item">
            <ReportList
              :consultantId="consultantId"
              :personId="personId"
            ></ReportList>
          </swiper-item>
        </swiper>
      </view>
    </view>

    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </page-wrap>
</template>

<script>
import { getAdviserHomeInfo, focusOrCancel } from "@/api/modules/career";
import Avatar from "@/components/Avatar";
import ArticleList from "../components/ArticleList";
 
import ReportList from "../components/ReportList";
import PublicationList from "../components/PublicationList";

import ShareMixin from "@/mixins/share";
import LoginDialog from "@/components/LoginDialog";

export default {
  mixins: [ShareMixin],
  components: {
    Avatar,
    ArticleList,
     
    ReportList,
    PublicationList,
    LoginDialog,
  },
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      consultantId: "",
      bgHeight: getApp().globalData.navHeight + uni.upx2px(200),
      navHeight: getApp().globalData.navHeight,
      defaultBg: this.$imgBaseSelf + "consultant/top-banner.png",
      personInfo: {
        rel: "", // 关注状态：1关注了,5自己,0没关注
      },
      manImg: this.$imgBase + "resume/man.png",
      womanImg: this.$imgBase + "resume/woman.png",
      tabList: [
        {
          name: "职讯",
        },
        // {
        //   name: "短视频",
        // },

        { name: "专刊" },
        {
          name: "报告",
        },
      ],
      current: 0,
      swiperCurrent: 0,
      activeColor: this.$primaryColor,
      barStyleObj: {
        backgroundColor: "transparent",
        backgroundImage: `url(${this.$imgBaseSelf}/select.png)`,
        backgroundSize: "100% 100%",
        borderRadius: "0",
      },
      activeStyle: {
        color: "#333333",
        fontSize: "34rpx",
      },
      showAllDes: false,
      isShowReadMore: false,
      isShowNav: false,
      showTop: false,
    };
  },
  computed: {
    desContent() {
      if (this.personInfo.grzz && this.personInfo.grzz.length > 50) {
        this.isShowReadMore = true;
        if (this.showAllDes) {
          return this.personInfo.grzz;
        }
        return this.personInfo.grzz.slice(0, 50) + "...";
      }
      return this.personInfo.grzz;
    },
  },
  onLoad(opt) {
    if (opt.toPublication) {
      this.$nextTick(() => {
        this.swiperCurrent = 1;
        this.current = 1;
      });
    }
    // 当前激活tab
    if (opt.current) {
      this.$nextTick(() => {
        this.swiperCurrent = opt.current;
        this.current = opt.current;
      });
    }
    if (opt && opt.id) {
      //24396953是一览通账户的id
      this.consultantId = opt.id;
      this.getInfoData();
    }
    this.sharePath =
      "/pagesSub/career/consultant/index?id=" + this.consultantId;
    this.shareQuery = "id=" + this.consultantId;
    if (opt.toPublication) {
      this.sharePath += "&toPublication=" + opt.toPublication;
      this.shareQuery += "&toPublication=" + opt.toPublication;
    }
    if (opt.current) {
      this.sharePath += "&current=" + opt.current;
      this.shareQuery += "&current=" + opt.current;
    }
  },
  onPageScroll(res) {
    this.showTop = res.scrollTop > 40;
  },

  // onShareAppMessage() {
  //   return {
  //     title: this.$selfName + " - " + this.info.title,
  //     path: "/pagesSub/career/consultant/index?id=" + this.personInfo.personId,
  //     imageUrl: this.info.thumb,
  //   };
  // },
  // onShareTimeline() {
  //   return {
  //     title: this.$selfName + " - " + this.info.title,
  //     path: "/pagesSub/career/consultant/index?id=" + this.personInfo.personId,
  //     imageUrl: this.info.thumb,
  //   };
  // },
  methods: {
    getInfoData() {
      const params = {
        personId: this.consultantId,
        loginPersonId: this.personId,
      };
      getAdviserHomeInfo(params).then((res) => {
        if (res.code == 200) {
          this.personInfo = res.data.person_info;
          this.setShareInfo();
        }
      });
    },
    tabsChange(index) {
      this.swiperCurrent = index;
    },
    handleTransition(e) {
      let dx = e.detail.dx;
      this.$refs.tabs.setDx(dx);
    },
    handleAnimation(e) {
      let current = e.detail.current;
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    previewImg(img) {
      if (img) {
        let imgsArray = [];
        imgsArray[0] = img;
        uni.previewImage({
          current: 0,
          urls: imgsArray,
        });
      }
    },
    handleFollow() {
      if (!this.personId) {
        // let fullPath =
        //   getCurrentPages()[getCurrentPages().length - 1].$page.fullPath;
        // let returnUrl = encodeURIComponent(fullPath);
        // uni.showModal({
        //   title: "提示",
        //   content: "该功能需要登录",
        //   success: function (res) {
        //     if (res.confirm) {
        //       uni.navigateTo({
        //         url: "/pagesSub/public/loginMode/index?returnUrl=" + returnUrl,
        //       });
        //     } else if (res.cancel) {
        //       console.log("用户点击取消");
        //     }
        //   },
        // });
        this.showLoginDialog();
        return;
      }
      if (this.personInfo.rel == 5) return;
      let focusType = 1;
      if (this.personInfo.rel == 1) {
        focusType = 0;
      } else if (this.personInfo.rel == 0) {
        focusType = 1;
      }
      const params = {
        uid: this.personId,
        followUid: this.consultantId,
        focusType,
      };
      focusOrCancel(params).then((res) => {
        if (res.code == 200) {
          this.personInfo.rel = focusType;
          if (focusType == 1) {
            this.personInfo.fans_count++;
          } else {
            this.personInfo.fans_count--;
          }
        }
        uni.showToast({
          title: res.status_desc,
          icon: "none",
          duration: 2000
        });
      });
    },
    setShareInfo() {
      this.shareTitle = this.$selfName + " - " + this.personInfo.person_iname;
    },
    showLoginDialog() {
      this.$refs.loginDialog.setVisibility(true);
    },
    loginSuccessBack() {
      console.log("loginSuccessBack");
      this.personId = uni.getStorageSync("person-id").slice(2) || "";
      this.getInfoData();
    },
  },
};
</script>

<style lang="scss" scoped>
.consultant {
  background: #ffffff;
  .base-info {
    position: relative;
    z-index: 1;
    margin-top: -100rpx;
    padding: 0 32rpx;
    padding-top: 1rpx;
    background: #ffffff;
    border-radius: 36rpx 36rpx 0px 0px;
    &-top {
      display: flex;
      justify-content: space-between;
      margin-top: -40rpx;
      margin-bottom: 28rpx;
    }
    .right-data {
      align-self: flex-end;
      display: flex;
      margin-bottom: 14rpx;
      .num-item {
        position: relative;
        padding: 0 32rpx;
        text-align: center;
        &::after {
          position: absolute;
          right: 0;
          top: 28rpx;
          content: "";
          width: 4rpx;
          height: 24rpx;
          background-color: #e5e5e5;
        }
        &:last-child::after {
          display: none;
        }
        .num-value {
          display: block;
          color: #222222;
          font-size: $uni-font-size-lg;
          font-weight: bold;
        }
        .num-label {
          color: #888888;
          font-size: $uni-font-size-sm;
        }
      }
    }
    .avatar-wrap {
      .avatar {
        width: 180rpx;
        height: 180rpx;
        border-radius: 50%;
        border: 2rpx solid #ffffff;
      }
    }

    .author {
      display: flex;
      justify-content: space-between;
      margin-bottom: 22rpx;
      &-name {
        font-size: 44rpx;
        color: #222222;
      }
      .icon-consultant {
        width: 54rpx;
        height: 46rpx;
        margin-top: -8rpx;
        background-image: url($img-base + "career/consultant.png");
      }
      .follow {
        width: 120rpx;
        height: 64rpx;
        line-height: 60rpx;
        text-align: center;
        font-size: 22rpx;
        color: $uni-border-color-red;
        border-radius: 16px;
        background-color: #ffefef;
        border: 2rpx solid $uni-border-color-red;
      }
      .followed {
        color: #bfbfbf;
        background-color: #fafafa;
        border: 2rpx solid #e5e5e5;
      }
    }

    .good-at {
      margin-bottom: 36rpx;
      font-size: 30rpx;
      color: #333333;
      .icon-auth {
        width: 48rpx;
        height: 40rpx;
        margin-right: 14rpx;
        background-image: url($img-base + "consultant/auth.png");
      }
    }

    .topic {
      margin-bottom: 36rpx;
      font-size: 26rpx;
      color: #555555;
      &-item {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
      }
      .icon-tag {
        width: 36rpx;
        height: 36rpx;
        margin-right: 10rpx;
        background-image: url($img-base + "consultant/tag.png");
      }
    }
    .person-des {
      .des-title {
        margin-bottom: 28rpx;
        font-size: 35rpx;
        font-weight: 800;
        color: #222222;
      }
      .des-text {
        color: #555555;
        font-size: 28rpx;
        white-space: pre-line;
      }
      .unfold {
        margin-left: 10rpx;
        display: inline-block;
        color: #f04646;
        text-decoration: underline;
      }
    }
  }

  .content {
    margin-top: 32rpx;
    box-shadow: 0px -12rpx 20rpx 0px rgba(0, 0, 0, 0.04);
    .tabs-wrap {
      border-top: 2rpx solid #f5f5f5;
      border-bottom: 2rpx solid #f5f5f5;
    }
  }
  .swiper-box {
    min-height: 100vh;
    height: 100vh;
  }
}
</style>
